<template>
    <div style="width:100%;">
        <div style="width:100%;padding-top:35px;">
            <!-- 收益图 -->
            <div style="background-color: #fff;margin:0px 35px;width: calc(100%  - 80px);">
                <div class="pointer" style="font-weight: 700;color: #00192f;font-size:20px;padding:18px 30px;">收益概述</div>
                <div style="border: 1px solid #d9dcdf;display:flex;justify-content:center;padding-bottom:50px;">
                    <div class="profit_chart" id="profit_charts"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.profit_chart{
    width: 95%;
    height: 500px;
}
</style>
<script>
export default {
    data () {
        return{
            charts:'',
            orderList:'',
            DrawData:'',
            drawvalue:[],
            drawdate:[]
        }
    },
    mounted () {
        this.SessionToken = localStorage.getItem('SessionToken')
        this.getDrawData()
    },
    methods:{
        getDrawData(){
            let inrecordId = localStorage.getItem('inrecordId')
            this.$http.get('getInTradingAccountMsg?sessionToken='+this.SessionToken+'&inrecordId='+inrecordId+'').then((resp) => {
                if (resp.data.status === 200) {
                    this.DrawData=resp.data.data.profitList
                    if(this.DrawData != null){
                        let a = 0
                        for(let i=0;i<this.DrawData.length;i++){
                            a=this.DrawData[i].profit+a
                            this.drawvalue.push(a)
                            this.drawdate.push(this.DrawData[i].date)
                        }
                    }
                    this.drawprofitcharts ()
                    console.log(resp.data)
                } else {
                this.$message.error(resp.data.msg)
                }
            })
        },
        drawprofitcharts () {
            this.charts = this.$echarts.init(document.getElementById('profit_charts'));
            this.charts.setOption( {
                tooltip: {
                trigger: 'axis'
                },
                legend: {
                // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
                },
                toolbox: {
                feature: {
                    saveAsImage: {}
                }
                },
                xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.drawdate
                },
                yAxis: {
                type: 'value'
                },
                series: [
                {
                                // name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    data: this.drawvalue
                },
                // {
                //               // name: '联盟广告',
                //   type: 'line',
                //   stack: '总量',
                //               // data: [220, 182, 191, 234, 290, 330, 310]
                // },
                // {
                //               // name: '视频广告',
                //   type: 'line',
                //   stack: '总量',
                //               // data: [150, 232, 201, 154, 190, 330, 410]
                // },
                // {
                //   // name: '直接访问',
                //   type: 'line',
                //   stack: '总量',
                //   // data: [320, 332, 301, 334, 390, 330, 320]
                // },
                // {
                //   // name: '搜索引擎',
                //   type: 'line',
                //   stack: '总量',
                //   // data: [820, 932, 901, 934, 1290, 1330, 1320]
                // }
                ]

            });
        },
    }
    
}
</script>